<template>
	<view class="content">
		<view class="eva-header">
			<view class="h-type" :class="tabIndex==0?'active':''" @click="showCoupon('0')">未使用</view>
			<view class="h-type" :class="tabIndex==1?'active':''" @click="showCoupon('1')">已使用</view>
			<view class="h-type" :class="tabIndex==2?'active':''" @click="showCoupon('2')">已失效</view>
		</view>
		<view class="coupon-list-n">
			<view class="fix_dot" :class="tabIndex==1?'used':tabIndex=='2'?'used':''" v-for="(item,index) in couponList" :key="index">
				<view class="coupon" >
					<view class="coupon-img">
						<img :src="item.productPic" alt="">
					</view>
					<view class="coupon-right">
						<view class="c-title" v-if="item.type == 0">满{{item.minPoint}}元减{{item.amount}}元</view>
						<view class="c-title" v-if="item.type == 1">折扣上限{{item.discountCeiling}}元</view>
						<view class="c-title" v-if="item.type == 2">立减{{item.amount}}元</view>
						<view class="c-sub">{{item.name}}</view>
						<view class="c-time">{{item.startTime}}-{{item.endTime}}</view>
						<!--<view class="c-integral">12积分</view>-->
						<view class="c-p">
							<view class="rules" @click="goRules(item.note)">
								规则
								<image src="/static/common/arrow-right.png"></image>
							</view>
							<view class="btn" v-if="tabIndex == 2">已失效</view>
							<view class="btn" @click="getCoupon(item.id)" v-else>去使用</view>
							<view class="bUsed" v-if="tabIndex==1">
								<img src="/static/coupon/yingzhang@2x.png" alt="">
							</view>
						</view>
					</view>
				</view>
				<view class="dot"></view>
				<view class="dot b"></view>
			</view>
		</view>
		<navigator url="/pages/coupon/center" open-type="redirect" class="bottom-navigation">
			<image src="/static/mine/youhuiquan@2x.png" class="youhuiImg"></image>
			更多优惠，去领券
			<image src="/static/common/arrow-right.png"></image>
		</navigator>
		<view class="pop-center" v-if="isRules">
			<view class="rules-pop">
				<image src="/static/icon/guanbi1@2x.png" class="close" @click="isRules = false"></image>
				<text class="rulesContent">
					使用说明：
					{{rulesContent}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
    import {_userCouponManage} from '../../common/vmeitime-http/mem.js'
	import utils from '../../common/utils/util.js'
	export default {
		data() {
			return {
                tabIndex:0,
				couponList:[],
				isRules: false,
				rulesContent:''
			};
		},
		
		onLoad(options){
			// #ifdef H5
			this.headerTop = document.getElementsByTagName('uni-page-head')[0].offsetHeight+'px';
			// #endif
			
			
			// ----接口函数-----
			// this.showCoupon(this.tabIndex)
			
			
			
			
		},
		onPageScroll(e){
			//兼容iOS端下拉时顶部漂移
			if(e.scrollTop>=0){
				this.headerPosition = "fixed";
			}else{
				this.headerPosition = "absolute";
			}
		},
		//下拉刷新
		onPullDownRefresh(){
			// this.loadData('refresh');
		},
		//加载更多
		onReachBottom(){
			// this.loadData();
		},
		methods: {
            async showCoupon(n){
                this.couponList = [];
                this.tabIndex = n;
                let para = {
                    useStatus:this.tabIndex
//                    useStatus:0
				};
				
				
				// ----接口函数----
				
    //             let tempData = await _userCouponManage(para);
    //             let couponList = tempData.data.data;
    //             couponList.forEach((item=>{
				// 	item.startTime = utils.formatDate.format(new Date(item.startTime),'yyyy.MM.dd');
				// 	item.endTime = utils.formatDate.format(new Date(item.endTime),'yyyy.MM.dd');
				// }));
                // this.couponList = couponList
				
				
				
				
            },
			getCoupon(n){
             if(this.tabIndex==0){
                 uni.switchTab({
					 url:"/pages/index/index"
				 })
			 }
			},
			goRules(note){
				console.log(note)
				this.isRules = true;
				this.rulesContent = note;
			}
		},
	}
</script>

<style lang="scss">
	page, .content{
		background: #ffffff;
	}
	.content{
		/*padding-top: 96upx;*/
	}
	/*优惠券*/
	.eva-header{
		display: flex;
		padding: 26upx 85upx 0;
		justify-content:space-between;
		background: #f8f8f8;
		.h-type{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: $font-color-dark;
			height: 53upx;
			border-bottom: 4upx solid #f8f8f8;
			padding-bottom: 30upx;
			/*flex: 1;*/
			&.active{
				border-bottom: 4upx solid $uni-color-primary;
				color: $uni-color-primary;
			}
		}
	}
	.coupon-list{
		padding-top: 40upx;
		.coupon{
			width: 690upx;
			height:197upx;
			margin: auto;
			position: relative;
			display: flex;
			margin-bottom: 30upx;
			.left{
				position: relative;
				z-index: 1;
				color: $uni-color-primary;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 67%;
				.f1_td{
					display: flex;
					align-items: center;
					justify-content: center;
					.price{
						font-size: 80upx;
						margin-right: 25upx;
						span{
							font-size:40upx;
						}
					}
					.sub{
						.title{
							font-size: 32upx;
						}
						.time{
							font-size: 19upx;
						}
					}
				}
				.btn{
					font-size: 24upx;
					background: $uni-color-primary;
					color: #ffffff;
					padding: 11upx 103upx;
				}
			}
			.right{
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				flex: 1;
				color: #ffffff;
				font-size: 40upx;
				.go{
					font-size: 26upx;
					margin-top: 26upx;
				}
			}
			.bg{
				position: absolute;
				top:0;
				width:100%;
				height: 100%;
				z-index: 0;
				img{
					width: 690upx;
					height: 197upx;
				}
			}
		}
		/*已使用*/
		.used{
			.right{
				color: #57A057;
				position: relative;
				.mark{
					font-size: 40upx;
					color: #ffffff;
					height: 153upx;
					width: 153upx;
					position: absolute;
					border: 2upx solid #ffffff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					transform:rotate(-30deg);
				}
			}
		}
		/*已失效*/
		.expired{
			color:#BFBFBF;
			.left{
				color: #BFBFBF;
				.btn{
					background: #BFBFBF;
				}
			}
		}
	}
	/*优惠券列表*/
	.coupon-list-n{
		padding: 40upx;
		padding-bottom: 140upx;
	}
	.fix_dot{
		overflow: hidden;
		position: relative;
		margin-bottom: 20upx;
		.dot{
			position: absolute;
			width: 20upx;
			height: 20upx;
			background: #ffffff;
			border-radius: 50%;
			border: 2upx solid $uni-color-primary;
			left: 280upx;
			top: -10upx;
			&.b{
				top:281upx;
			}
		}
	}
	.coupon{
		border: 2upx solid $uni-color-primary;
		display: flex;
		background: #ffffff;
		/*border-radius: 5upx;*/
		.coupon-img{
			width: 254rpx;
			height: 254rpx;
			padding: 16rpx;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.coupon-right{
			font-size: 24upx;
			color: #989898;
			display: flex;
			flex-direction: column;
			justify-content: center;
			line-height: 47rpx;
			flex: 1;
			padding-left: 20upx;
			position: relative;
			.c-title{
				font-size: 30upx;
				color: $font-color-dark;
			}
			.c-sub{
				font-size: 24upx;
				color: #656565;
			}
			.c-integral{
				font-size: 30upx;
				font-weight: bold;
				color: $uni-color-primary;
			}
			.c-time{
				margin-bottom: 20upx;
			}
			.c-p{
				display: flex;
				justify-content: space-between;
				line-height: 30upx;
				overflow: hidden;
				.progress{
					overflow: hidden;
					position: relative;
					display: inline-block;
					color: $uni-color-primary;
					border: 2upx solid $uni-color-primary;
					border-radius: 20upx;
					padding: 0 30upx;
					margin-top: 16upx;
					.pro{
						position: absolute;
						width: 60%;
						height: 100%;
						left: 0;
						background: #70B290;
						z-index: 0;
					}
					.info{
						position: relative;
						z-index: 1;
					}
				}
				.btn{
					display: inline-block;
					background: $uni-color-primary;
					color: #ffffff;
					border-radius: 5upx;
					padding: 17upx 30upx;
					/*float: right;*/
					margin-right: 30upx;
				}
				.rules{
					display: flex;
					align-items: center;
					color: #282828;
					image{
						width: 40upx;
						height: 40upx;
					}
				}
			}
		}
	}
	.fix_dot{
		$used-color:#BFBFBF;
		&.used{
			.coupon{
				border: 2upx solid $used-color;
				.c-title{
					color: $used-color;
				}
				.c-integral{
					font-size: 30upx;
					font-weight: bold;
					color: $used-color
				}
				.c-sub{
					color: $used-color;
				}
				.btn{

					background: $used-color!important;
					color: #ffffff;
				}
				.bUsed{
					width: 114upx;
					height: 114upx;
					float: right;
					margin: -20upx 30upx 0 0;
					position: absolute;
					right: 0;
					top: 35upx;
					img{
						width: 114upx;
						height: 114upx;
					}
				}
				.coupon-right .c-p{
					overflow: visible;
				}
			}
			.dot{
				border: 2upx solid $used-color!important;

			}
		}
	}
	.bottom-navigation{
		width: 100%;
		height: 110upx;
		position: fixed;
		bottom: 0upx;
		background: #f8f8f8;
		color: #017F01;
		font-size: 32upx;
		display: flex;
		justify-content: center;
		align-items: center;
		.youhuiImg{
			margin-right: 20upx;
		}
		image{
			width: 50upx;
			height: 50upx;
			margin-left: 10upx;
		}
	}
	.pop-center {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
	
		.rules-pop {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 466upx;
			min-height: 476upx;
			padding: 20upx;
			background: rgba(255, 255, 255, 1);
			border: 4upx solid #017F01;
			border-radius: 30upx;
			color: #282828;
			font-size: 28upx;
			position: relative;
	
			.close {
				width: 64upx;
				height: 64upx;
				position: absolute;
				right: -20upx;
				top: -20upx;
			}
		}
		.rulesContent{
			width: 100%;
			height: 100%;
			word-wrap:break-word;
		}
	}
</style>

